<html lang="zh-cmn-Hans">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2VaZyTY2gYr2GzD42Hwe5mzE1U85SzGf"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
	<!--标准mui.css-->
	<link rel="stylesheet" href="{{asset('/resources/views/admin/style/css/mui.min.css')}}">
	<script type="text/javascript" src="{{asset('/resources/views/admin/style/js/mui.min.js')}}"></script>

	<!--App自定义的css-->
	<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
	<style>
		body,
		html,
		#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
		
		.mui-card .mui-control-content {
			padding: 10px;
		}
		
		.mui-control-content {
			height: 400px;
		}
	</style>

	<body>
		<div class="mui-content">
			<!--<div>
				<div style="" class="mui-icon mui-icon-search "></div>

				<input id="ip_search" type="text" style="width: 19rem;" placeholder="搜地点" onkeypress="EnterPress(event)" >
				<button id="bt_search" onclick="search()" style="margin-top: 0.2rem;">搜索</button>
			</div>-->

			<div>
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item" href="#item1">列表</a>
					<a class="mui-control-item mui-active" href="#allmap">地图</a>

				</div>
			</div>


			<div>
				<div id="allmap" class="mui-control-content mui-active">

				</div>
				<div id="item1" class="mui-control-content" style="height: 100%;">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view" id="list_message">

							</ul>
						</div>
					</div>

				</div>
			</div>
		</div>

		<script ></script>
		<script>
			mui.init({
				swipeBack: true, //启用右滑关闭功能	

			});
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);

			var points = [];
			var heatMapState = false; //热力图显示状态
			var response_obj;
			var statue = new Array("正常", "异常");

			var map = new BMap.Map("allmap");
			var point = new BMap.Point(113.618261, 34.861984);
			map.centerAndZoom(point, 15);
			initSearchAndHeanMap();
			var ip_search = document.getElementById('ip_search');
			var bt_search = document.getElementById('bt_search');
			initView();
			//
			//			var geolocation = new BMap.Geolocation();
			//			geolocation.getCurrentPosition(function(r) {
			//				if(this.getStatus() == BMAP_STATUS_SUCCESS) {
			//					var mk = new BMap.Marker(r.point);
			//					map.addOverlay(mk);
			//					map.panTo(r.point);
			//					point = r.Point
			//					alert('您的位置：' + r.point.lng + ',' + r.point.lat);
			//				} else {
			//					alert('failed' + this.getStatus());
			//				}
			//			}, {
			//				enableHighAccuracy: true
			//			})
			document.getElementById("allmap").addEventListener('touchend', searchBlur, false);

			function initSearchAndHeanMap() {
				// 通过JavaScript的prototype属性继承于BMap.Control   
				SearchControl.prototype = new BMap.Control(); // 将标注添加到地图中
				// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
				// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
				SearchControl.prototype.initialize = function(map) {
					// 创建一个DOM元素   

					var div = document.createElement("div");

					div.innerHTML =
						'<div  class="mui-icon mui-icon-search "></div>' +
						'<input id="ip_search" type="text" style="width: 19rem;" placeholder="搜地点" onkeypress="EnterPress(event)" >' +
						'<button id="bt_search" onclick="search()" style="margin-left: 0.2rem; margin-top: 0.2rem;">搜索</button>';
					// 添加文字说明    

					// 添加DOM元素到地图中   
					map.getContainer().appendChild(div);
					// 将DOM元素返回  
					return div;
				}

				var mySearchControl = new SearchControl();
				map.addControl(mySearchControl);
				// 通过JavaScript的prototype属性继承于BMap.Control   
				ZoomControl.prototype = new BMap.Control(); // 将标注添加到地图中
				// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
				// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
				ZoomControl.prototype.initialize = function(map) {
					// 创建一个DOM元素   
					var div = document.createElement("button");
					// 添加文字说明    
					div.appendChild(document.createTextNode("热力图"));
					// 设置样式    
					div.style.cursor = "pointer";
					div.style.border = "1px solid gray";
					div.style.backgroundColor = "white";
					// 绑定事件，点击一次放大两级    
					div.onclick = function(e) {

						if(heatMapState) {
							map.clearOverlays();
							showMarker();
							heatMapState = false;
							initView();

						} else {
							map.clearOverlays();
							heatMapState = true;
							openHeatmap();
						}

					}
					// 添加DOM元素到地图中   
					map.getContainer().appendChild(div);
					// 将DOM元素返回  
					return div;
				}
				var myZoomCtrl = new ZoomControl();
				map.addControl(myZoomCtrl);

				if(!isSupportCanvas()) {
					alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
				}
			}

			function search() {
				var local = new BMap.LocalSearch(map, {
					renderOptions: {
						map: map,
						panel: "r-result"
					},
					pageCapacity: 5
				});
				local.searchInBounds(ip_search.value, map.getBounds());
			}

			function initView() {

				ajax_data();
				showMarker();
				initList();
			}

			function ajax_data() {
				var heatMapType = localStorage.getItem("heatMapType");
				queryDataSuccess();
			}

			function queryDataSuccess() {
				var response1 = [{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1000",
						"worksite_adress": "河南大河南大学科技园河南大学科技园河南大学科技园河南大学科技园学科技园",
						"linkman": "张三",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.618261,
						"latitude": 34.821984,
						"heat_value": 10,

					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1001",
						"worksite_adress": "河南大学科技园",
						"linkman": "李四",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.623332,
						"latitude": 34.821984,
						"heat_value": 15
					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1002",
						"worksite_adress": "河南大学科技园",
						"linkman": "王五",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.618261,
						"latitude": 34.816532,
						"heat_value": 20
					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1003",
						"worksite_adress": "河南大学科技园",
						"linkman": "陈留",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.618261,
						"latitude": 34.831984,
						"heat_value": 25
					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1004",
						"worksite_adress": "河南大学科技园",
						"linkman": "张飞",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.618261,
						"latitude": 34.841984,
						"heat_value": 30
					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1005",
						"worksite_adress": "河南大学科技园",
						"linkman": "王三",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.618261,
						"latitude": 34.801984,
						"heat_value": 35
					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1006",
						"worksite_adress": "河南大学科技园",
						"linkman": "叶三",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.658261,
						"latitude": 34.821984,
						"heat_value": 40
					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1007",
						"worksite_adress": "河南大学科技园",
						"linkman": "张三",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.668261,
						"latitude": 34.821984,
						"heat_value": 45
					},
					{
						"worksite_name": "众诚商砼",
						"worksite_guid": "1001-1001-1001-1008",
						"worksite_adress": "河南大学科技园",
						"linkman": "黄三",
						"telephone": 1234567,
						"status": 0,
						"longitude": 113.618261,
						"latitude": 34.861984,
						"heat_value": 60
					}
				];
				var response2 = JSON.stringify(response1);
				response_obj = JSON.parse(response2);

				for(var i = 0; i < response1.length; i++) {
					var point = new Point(response1[i].longitude, response1[i].latitude, response1[i].heat_value);
					points[i] = point;
				}

			}

			function showMarker() {
				for(var i = 0; i < response_obj.length; i++) {
					addMarker(i);
				}

			}

			function initList() {
				var messageList = document.getElementById("list_message");
				document.getElementById("list_message").innerHTML = "";
				for(var i = 0; i < response_obj.length; i++) {
					var li = document.createElement('li');
					var guid = response_obj[i].worksite_guid;
					li.setAttribute('id', i)
					li.className = 'mui-table-view-cell mui-media';
					li.innerHTML = "<a style='width:100%; ' onclick='goTrend(\"" + response_obj[i].worksite_guid + "\")'>" +
						'<div class="mui-media-body"> <div class="mui-input-row">' +
						'<div class="mui-icon mui-icon-info-filled "></div>' + response_obj[i].worksite_name + '</div>' +
						'<p style="font-size: 14px; ">联系人:' + response_obj[i].linkman +'&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 联系人电话: ' + response_obj[i].telephone + '</p>' +
						
						'<p style="font-size: 14px; ">地址: ' + response_obj[i].worksite_adress + '</p>' +
						'<p style="font-size: 14px; ">状态：' + statue[response_obj[i].status] + '</p>' +
						'</div></a>';
					messageList.insertBefore(li, messageList.lastChild);
				}

			}

			// 定义一个控件类，即function    
			function SearchControl() {
				// 设置默认停靠位置和偏移量  
				this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
				this.defaultOffset = new BMap.Size(0, 5);

			}

			function searchBlur() {
				ip_search.blur();
			}

			// 编写自定义函数,创建标注

			function EnterPress(e) { //传入 event 
				var e = e || window.event;
				if(e.keyCode == 13) {
					bt_search.click();
				}
			}

			function addMarker(i) {
				var p = new BMap.Point(response_obj[i].longitude, response_obj[i].latitude);
				var marker = new BMap.Marker(p);
				map.addOverlay(marker);
				var sContent =
					"<div >" +
						'<div class="mui-media-body"> <div class="mui-input-row">' +
						'<div class="mui-icon mui-icon-info-filled "></div>' + response_obj[i].worksite_name + '</div>' +
						'<p style="font-size: 14px; ">联系人:' + response_obj[i].linkman + '</p>' +
						'<p style="font-size: 14px; ">联系人电话: ' + response_obj[i].telephone +'</p>' +
						'<p style="font-size: 14px; ">地址: ' + response_obj[i].worksite_adress + '</p>' +
						'<p style="font-size: 14px; ">状态：' + statue[response_obj[i].status] + '&emsp;&emsp;&emsp;&emsp;<button class="mui-navigate-right" onclick="goTrend(\'' + response_obj[i].worksite_guid + '\')">查看详情</button></p>' +
						'</div></div>';
				var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象

				marker.addEventListener("click", function() {
					this.openInfoWindow(infoWindow);
					//图片加载完毕重绘infowindow

					

				});
				map.addOverlay(marker);
			}

			function goTrend(guid) {

				//			获得详情页面
				var main;
				if(!main) {
					main = plus.webview.getWebviewById('index');

				}

				//触发详情页面的newsId事件
				mui.fire(main, 'alert_worksite', {
					worksite_guid: guid
				});

			}

			// 定义一个控件类，即function    
			function ZoomControl() {
				// 设置默认停靠位置和偏移量  
				this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
				this.defaultOffset = new BMap.Size(25, 50);

			}

			// 创建控件实例    

			function Point(lng, lat, count) {
				this.lng = lng,
					this.lat = lat,
					this.count = count
			}

			//是否显示热力图
			function openHeatmap() {

				heatmapOverlay = new BMapLib.HeatmapOverlay({
					"radius": 20
				});
				map.addOverlay(heatmapOverlay);
				heatmapOverlay.setDataSet({
					data: points,
					max: 100
				});

				heatmapOverlay.show();
			}

			function closeHeatmap() {
				heatmapOverlay.hide();
			}

			function setGradient() {

				var gradient = {};
				var colors = document.querySelectorAll("input[type='color']");
				colors = [].slice.call(colors, 0);
				colors.forEach(function(ele) {
					gradient[ele.getAttribute("data-key")] = ele.value;
				});
				heatmapOverlay.setOptions({
					"gradient": gradient
				});
			}
			//判断浏览区是否支持canvas
			function isSupportCanvas() {
				var elem = document.createElement('canvas');
				return !!(elem.getContext && elem.getContext('2d'));
			}
		</script>
	</body>

</html>